<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Toolbar 测试</title>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/css/dpl/--base.css,badges.css,forms.css,icons.css,labels.css,tables.css-20130815" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/css/dpl/??base.css,badges.css,forms.css,icons.css,labels.css,tables.css?20130815"
            rel="stylesheet"/>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/fi000001.css" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/??button/assets/dpl.css,calendar/assets/dpl.css,menu/assets/dpl.css,combobox/assets/dpl.css,menubutton/assets/dpl.css,overlay/assets/dpl.css,split-button/assets/dpl.css,tabs/assets/dpl.css,toolbar/assets/dpl.css,tree/assets/dpl.css?20130815"
            rel="stylesheet"/>

    <link rel="stylesheet" href="../assets/prettify.css-20130815" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.css?20130815">
<script type="text/javascript" src="../assets/prettify.js" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.js"></script>
<style>
    ol.linenums {
        padding: 0;
    }
</style>
</head>
<body style="width: 800px;margin: 10px auto;" onload="prettyPrint()">
<div>
    <h1>
        Toolbar For KISSY
    </h1>

    <div style="height: 40px"></div>


    <div id="container">

    </div>
    <pre class="prettyprint linenums">
KISSY.use("toolbar,button,menubutton", function (S, Toolbar) {

    var t = new Toolbar({
        render:"#container",
        children:[
            {
                content:"menu-button",
                collapseOnClick:true,
                xclass:'menu-button',
                menu:{
                    children:[
                        {
                            content:'item1',
                            xclass:'submenu',
                            menu:{
                                children:[
                                    {
                                        content:'item1-1'
                                    },
                                    {
                                        content:'item1-2'
                                    }
                                ]
                            }
                        },
                        {
                            content:'item2'
                        }
                    ]
                }
            },
//                {
//                    xclass:'separator'
//                },
            {
                content:'button',
                checkable:true,
                xclass:'button'
            },
            {
                content:"menu-button2",
                xclass:'menu-button',
                collapseOnClick:true,
                menu:{
                    children:[
                        {
                            content:'item2-1'
                        },
                        {
                            content:'item2-2'
                        }
                    ]
                }
            }
        ]
    }).render();

    t.on("click", function (e) {
        S.log("click : " + e.target.get("content"));
    });

});

    </pre>
</div>
<script src="../../../../g.tbcdn.cn/kissy/k/1.3.1/seed.js" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/seed.js" data-config="{combine:true}"></script>
<script>
    KISSY.use("toolbar,button,menubutton", function (S, Toolbar) {

        var t = new Toolbar({
            render:"#container",
            children:[
                {
                    content:"menu-button",
                    collapseOnClick:true,
                    xclass:'menu-button',
                    menu:{
                        children:[
                            {
                                content:'item1',
                                xclass:'submenu',
                                menu:{
                                    children:[
                                        {
                                            content:'item1-1'
                                        },
                                        {
                                            content:'item1-2'
                                        }
                                    ]
                                }
                            },
                            {
                                content:'item2'
                            }
                        ]
                    }
                },
//                {
//                    xclass:'separator'
//                },
                {
                    content:'button',
                    checkable:true,
                    xclass:'button'
                },
                {
                    content:"menu-button2",
                    xclass:'menu-button',
                    collapseOnClick:true,
                    menu:{
                        children:[
                            {
                                content:'item2-1'
                            },
                            {
                                content:'item2-2'
                            }
                        ]
                    }
                }
            ]
        }).render();

        t.on("click", function (e) {
            S.log("click : " + e.target.get("content"));
        });

    });
</script>
</body>
</html>